<template>
  <div class="applyFor">
    <van-nav-bar title="修改密码" left-text="" left-arrow @click-left="onClickLeft" />
    <!-- <div class="topTitle">
        <title-item title1st="请填写修改的资料信息"> </title-item>
      </div> -->
    <div class="Form">
      <van-form @failed="onFailed" @submit="onSubmit">
        <van-cell-group inset>
          <!-- 通过 pattern 进行正则校验 -->
          <van-field v-model="old_password" name="old_password" label="旧密码" label-width="100" placeholder="请输入分销商名称"
            :rules="[{ required: true, message: '请填写用户名' }]" />
          <!-- 通过 validator 进行函数校验 -->
          <van-field v-model="password" label-width="100" type="password" name="password" label="新密码" placeholder="对账邮箱"
            :rules="[{ required: true, message: '请填新密码' }]" />
          <van-field v-model="againPassword" label-width="100" type="password" name="againPassword" label="确认密码"
            placeholder="对账邮箱" :rules="[{ required: true, message: '请填确认密码' }]" />
        </van-cell-group>
        <div style="margin: 16px">
          <van-button round block native-type="submit" color="linear-gradient(90deg, #218CC9 0%, #2CB9A4 100%)">
            确认修改
          </van-button>
        </div>
      </van-form>
      <van-popup v-model:show="showPicker" position="bottom">
        <van-picker :columns="columns" @confirm="onConfirm" @cancel="showPicker = false" />
      </van-popup>
    </div>
  </div>
</template>
  
<script setup>
import { showToast } from 'vant';
import useMainStore from '@/stores/modules/main';
import TitleItem from "@/components/title-item/title-item.vue";
import { closeToast, showLoadingToast } from "vant";
import { resetpwd } from '@/services'
import { ref } from "vue";
import { useRouter } from "vue-router";
const mainStore = useMainStore()
const router = useRouter();
const old_password = ref("");
const againPassword = ref("");
const password = ref("");
const result = ref("");
const showPicker = ref(false);
const columns = [
  { text: "杭州", value: "Hangzhou" },
  { text: "宁波", value: "Ningbo" },
  { text: "温州", value: "Wenzhou" },
  { text: "绍兴", value: "Shaoxing" },
  { text: "湖州", value: "Huzhou" },
];

const onConfirm = ({ selectedOptions }) => {
  result.value = selectedOptions[0]?.text;
  showPicker.value = false;
};
// const value4 = ref("");
// const pattern = /\d{6}/;

// 校验函数返回 true 表示校验通过，false 表示不通过
const validator = (val) =>
  /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/.test(
    val
  );

const onFailed = (errorInfo) => {
  console.log("failed", errorInfo);
};
const onSubmit = async (val) => {
  console.log(val, '成功的值')
  if (val.password !== val.againPassword) {
    showToast('新密码与确认密码不一致!')
    return;
  }
  let res = await resetpwd({ old_password: val.old_password, password: val.password })
  showToast('修改成功,请重新登录')
  mainStore.$reset()
  localStorage.clear()
  setTimeout(() => {
    router.push({
      path: '/login'
    })
  }, 1000)

}
// 返回按钮
const onClickLeft = () => {
  router.back();
};
</script>
  
<style lang="scss" scoped>
.applyFor {
  padding: 20px;
  padding-left: 0;
  display: flex;
  flex-direction: column;
  color: #1d1b20;

  .topTitle {
    margin-left: -4px;
  }
}
</style>
  